<template>
  <div class="rankingpage hideScrollBar">
    <div class="ranking" ref="scrollEl">
      <ClientOnly>
        <!-- 导航 -->
        <NavBar
          :title="t('mvp.ranking.text1')"
          :isTransparent="pageData.whiteTheme"
          :whiteTheme="pageData.whiteTheme"
          :navScorllOffset="60"
          navScorllColor="#FFF"
          :scrollEl="scrollEl"
          :placeholder="false"
          @thresholdChange="(val) => (pageData.whiteTheme = !val)"
          isFixed
        />
        <!-- 领奖台 -->
        <div class="header">
          <img class="top100" src="/image/ranking/top-bg-icon.svg" />
          <img class="podium" src="/image/ranking/podium-icon.png" />
          <!-- 第一名 -->
          <div class="athletes header-first items-center">
            <!-- 皇冠 -->
            <img class="athletes-crown" src="/image/mvp/crown.svg" />
            <!-- 翅膀 -->
            <img class="athletes-firstwings" src="/image/mvp/gold-medal.svg" />
            <!-- 头像 -->
            <Images
              isHttp
              v-if="winners[0].avatar"
              class="athletes-avatar"
              :src="winners[0].avatar"
              :placeholder="imgUrl.avatarDefault"
            ></Images>
            <Images
              v-else
              class="athletes-avatar"
              :src="imgUrl.avatarDefault"
            ></Images>
            <!-- 排名 -->
            <div class="athletes-rank header-first-rank items-center">
              <img class="athletes-rank-ranking" src="/image/mvp/first.svg" />
              <div class="athletes-rank-nickname">
                {{ winners[0].nickname || t("mvp.other.text3") }}
              </div>
            </div>
            <!-- BDC 数量 -->
            <div class="athletes-bdc header-first-rank">
              {{
                winners[0].freeAmount
                  ? `${toThousands(decimalToLength(winners[0].freeAmount))} BDC`
                  : t("mvp.other.text3")
              }}
            </div>
          </div>
          <!-- 第二名 -->
          <div class="athletes header-second items-center">
            <!-- 翅膀 -->
            <img
              class="athletes-wings header-second-wings"
              src="/image/mvp/silver-medal.svg"
            />
            <!-- 头像 -->
            <Images
              isHttp
              v-if="winners[1].avatar"
              class="athletes-avatar header-second-avatar"
              :src="winners[1].avatar"
              :placeholder="imgUrl.avatarDefault"
            ></Images>
            <Images
              v-else
              class="athletes-avatar header-second-avatar"
              :src="imgUrl.avatarDefault"
            ></Images>
            <!-- 排名 -->
            <div class="athletes-rank items-center">
              <img class="athletes-rank-ranking" src="/image/mvp/second.svg" />
              <div class="athletes-rank-nickname">
                {{ winners[1].nickname || t("mvp.other.text3") }}
              </div>
            </div>
            <!-- BDC 数量 -->
            <div class="athletes-bdc">
              {{
                winners[1].freeAmount
                  ? `${toThousands(decimalToLength(winners[1].freeAmount))} BDC`
                  : t("mvp.other.text3")
              }}
            </div>
          </div>
          <!-- 第三名 -->
          <div class="athletes header-third items-center">
            <!-- 翅膀 -->
            <img
              class="athletes-wings header-third-wings"
              src="/image/mvp/bronze-medal.svg"
            />
            <!-- 头像 -->
            <Images
              isHttp
              v-if="winners[2].avatar"
              class="athletes-avatar header-third-avatar"
              :src="winners[2].avatar"
              :placeholder="imgUrl.avatarDefault"
            ></Images>
            <Images
              v-else
              class="athletes-avatar header-third-avatar"
              :src="imgUrl.avatarDefault"
            ></Images>
            <!-- 排名 -->
            <div class="athletes-rank items-center">
              <img class="athletes-rank-ranking" src="/image/mvp/third.svg" />
              <div class="athletes-rank-nickname">
                {{ winners[2].nickname || t("mvp.other.text3") }}
              </div>
            </div>
            <!-- BDC 数量 -->
            <div class="athletes-bdc">
              {{
                winners[2].freeAmount
                  ? `${toThousands(decimalToLength(winners[2].freeAmount))} BDC`
                  : t("mvp.other.text3")
              }}
            </div>
          </div>
          <!-- top 100 描述 -->
          <div class="header-holdings items-center">
            <div class="header-holdings-text">{{ $t("pledge.bdccyl100") }}</div>
          </div>
        </div>
        <!-- 内容部分 -->
        <div class="contentview">
          <div
            v-if="rankList.length === 0 && !pageData.loading"
            class="contentview-notdata items-center"
          >
            <Images
              class="contentview-notdata-img"
              src="/image/mvp/not-data.svg"
            ></Images>
            <div class="contentview-notdata-desc">
              {{ t("mvp.other.text2") }}
            </div>
          </div>

          <van-list
            v-else
            v-model:loading="pageData.loading"
            :finished="pageData.finished"
            @load="onLoadList"
            :finished-text="t('mvp.other.text4')"
            :loading-text="t('mvp.other.text11')"
          >
            <div
              class="ranking-item items-center"
              v-for="(item, index) in rankList"
              :key="item.id"
            >
              <div class="ranking-item-left items-center">
                <div class="ranking-item-rank">{{ index + 4 }}</div>
                <Images
                  v-if="item.avatar"
                  class="ranking-item-img"
                  isHttp
                  :src="item.avatar"
                  :placeholder="imgUrl.avatarDefault"
                ></Images>
                <Images
                  v-else
                  class="ranking-item-img"
                  :src="imgUrl.avatarDefault"
                ></Images>

                <div class="ranking-item-nickname">
                  {{ item.nickname || "--" }}
                </div>
              </div>
              <div class="ranking-item-bdc">
                {{ toThousands(decimalToLength(item.freeAmount)) }} BDC
              </div>
            </div>
          </van-list>
        </div>
      </ClientOnly>
    </div>
    <!-- 我的排名 -->
    <div class="footer items-center" v-if="rankList.length > 0">
      <!-- 已登录 -->
      <div
        v-if="isLogin"
        class="items-center"
        style="justify-content: space-between; width: 100%"
      >
        <div class="items-center">
          <!-- 头像 -->
          <Images
            v-if="userStore.$state.avatar"
            class="footer-img"
            isHttp
            :src="userStore.$state.avatar"
            :placeholder="imgUrl.avatarDefault"
          ></Images>
          <Images v-else class="footer-img" :src="imgUrl.avatarDefault" />
          <div class="footer-nick">
            {{
              pageData.myNickname ? pageData.myNickname.substring(0, 11) : "--"
            }}
            {{ pageData.myNickname && pageData.myNickname > 11 ? "..." : "" }}
          </div>
          <!-- <div class="footer-tag">
            {{ $t("pledge.wzjd") }}
          </div> -->
          <!-- 排名 -->
          <div
            class="footer-rank"
            :class="{ 'footer-rank-100': Number(pageData.myRank) > 100 }"
          >
            {{
              !pageData.myRank || Number(pageData.myRank) > 100
                ? "> 100"
                : Number(pageData.myRank)
            }}
          </div>
        </div>
        <div class="footer-bdc">
          {{
            `${toThousands(
              decimalToLength(pageData.userAccount.totalValue)
            )} BDC`
          }}
        </div>
      </div>
      <!-- 未登录 -->
      <div
        v-else
        class="items-center"
        style="justify-content: space-between; width: 100%"
      >
        <div class="items-center">
          <!-- 头像 -->
          <Images class="footer-img" :src="imgUrl.avatarDefault" />
          <div>
            <div class="footer-desc">
              {{ t("mvp.ranking.text4") }}
            </div>
            <div class="footer-sub-desc" style="margin-top: 5px">
              {{ t("mvp.ranking.text5") }}
            </div>
          </div>
        </div>
        <div class="footer-login" @click="jumpPage('login')">
          {{ t("mvp.ranking.text3") }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="ranking">
import { getLeaderboardV2 } from "../../../api/bdc";
import { getUserAccount } from "../../../api/user";
import { getOssFileUrl, decimalToLength } from "@/utils";
import { useGlobalStore } from "~~/store/global";
import { useUserStore } from "@/store/modules/user";

// definePageMeta({
//   keepalive: true,
// });

const { t } = useI18n();
// const route = useRoute();
// console.log("页面参数:", route.query);
const globalStore = useGlobalStore();

const isLogin = computed(() => globalStore.isLogin);

const userStore = useUserStore();
const imgUrl = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

const scrollEl = ref();

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 页面属性
const pageData = reactive({
  whiteTheme: true,
  userAccount: {
    totalValue: 0,
  },
  loading: false,
  finished: false,
  list: [],
  myRank: 1000, // 我的排名
  myNickname: "--", // 我的排名
  pageNum: 1,
  total: 100,
});

// 榜单前三名
const winners = computed(() => {
  if (pageData.list.length > 0 && pageData.list.length < 3) {
    const l = pageData.list.slice(0, pageData.list.length);
    for (let index = 0; index < 3; index++) {
      if (!l[index]) l.push({});
    }
    return l;
  } else if (pageData.list.length >= 3) {
    return pageData.list.slice(0, 3);
  }
  return [{}, {}, {}];
});
// 榜单 4-100
const rankList = computed(() => {
  if (pageData.list.length > 3) {
    return pageData.list.slice(3, 100);
  }
  return [];
});

// 上啦加载
const onLoadList = () => {
  pageData.pageNum += 1;
  getLeaderboardRequest((isAdd) => {
    if (!isAdd) {
      pageData.pageNum -= 1;
      pageData.finished = true; // 与后端协商： 如果返回没有数据了就认为是加载完了
    }
  });
};
// 获取列表数据
const getLeaderboardRequest = async (call) => {
  pageData.loading = true;
  const limit = pageData.pageNum * 30 >= pageData.total ? 10 : 30;
  const res = await getLeaderboardV2({
    offset: pageData.list.length,
    limit,
  });
  pageData.loading = false;
  // console.log("--获取列表数据--", res);
  if (res) {
    pageData.myRank = res.myRank;
    pageData.myNickname = res.myNickname || "--";

    pageData.list = pageData.list.concat(
      res.rankList.map((e) => {
        if (!e.avatar || e.avatar == "https://asset.onetrader.online/") {
          e.avatar = imgUrl.avatarDefault;
        }
        return e;
      })
    );

    if (
      pageData.list.length >= pageData.total ||
      pageData.list.length < limit
    ) {
      pageData.finished = true;
    }
    if (res.rankList && res.rankList.length > 0) {
      call && call(true);
    } else {
      call && call(false);
    }
  } else {
    pageData.finished = true;
    call && call(false);
  }
};

// 点击-页面跳转
const jumpPage = async (val, isApp = false) => {
  if (val === "login") {
    bridge.onAppLogin();
  }
};
onBeforeMount(async () => {
  // 1. 账户信息
  const res = await getUserAccount();
  // console.log("--账户信息：--", res);
  pageData.userAccount = res || {};
  pageData.userAccount.totalValue =
    Number(res.pledgeAmount) + Number(res.freeAmount);
});

onMounted(() => {
  onLoadList();
  // 埋点访问
  firebase?.logEvent("BDC_H5_Ranking_PUV", {
    time: Date.now(),
  });
});
</script>
<style lang="scss" scoped>
.ranking {
  background: linear-gradient(
    225deg,
    #149aff 0.1%,
    #007bff 50.1%,
    #0051e7 100.1%
  );
  background-size: 100% 520 * 2px;
  background-repeat: no-repeat;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;

  .header {
    position: relative;
    min-height: 397 * 2px;
    width: 100vw;
    z-index: 100;
    overflow: hidden;
    .podium {
      width: 100vw;
      overflow: hidden;
      position: absolute;
      bottom: -15px;
      left: 0px;
      scale: 1.01;
    }
    .top100 {
      position: absolute;
      left: 0;
      bottom: -95 * 2px;
      width: 100vw;
    }
    &-first {
      position: absolute;
      bottom: 205px;
      left: 50%;
      transform: translate(-50%, -50%);
      &-rank {
        position: relative;
        top: -8px;
      }
    }
    &-second {
      position: absolute;
      bottom: 158px;
      left: 20%;
      transform: translate(-50%, -50%);
      &-wings {
        position: relative;
        top: 5px;
      }
      &-avatar {
        top: 8 * 2px !important;
        width: 56 * 2px !important;
        height: 56 * 2px !important;
      }
    }
    &-third {
      position: absolute;
      bottom: 125px;
      right: -6%;
      transform: translate(-50%, -50%);
      &-wings {
        position: relative;
        top: 7px;
      }
      &-avatar {
        top: 8 * 2px !important;
        width: 56 * 2px !important;
        height: 56 * 2px !important;
      }
    }
    &-holdings {
      position: absolute;
      left: 0;
      bottom: 36px;
      width: 100vw;

      justify-content: center;

      &-text {
        background: linear-gradient(
          270deg,
          rgba(143, 187, 229, 0) 0%,
          #bfe0ff 50.2%,
          rgba(143, 187, 229, 0) 100%
        );
        // display: inline-flex;
        padding: 3 * 2px 12 * 2px;
        color: #007bff;
        font-size: 15 * 2px;
        font-weight: 590;
      }
    }

    .athletes {
      justify-content: center;
      flex-direction: column;
      max-width: 105 * 2px;

      &-crown {
        width: 25 * 2px;
        height: 17 * 2px;
      }
      &-avatar {
        position: absolute;
        top: 16.5 * 2px;
        width: 68 * 2px;
        height: 68 * 2px;
        border-radius: 100px;
        border: 1px solid #fff;
        box-sizing: content-box;
        overflow: hidden;
      }
      &-firstwings {
        margin-top: 30 * 2px;
        width: 106 * 2px;
        height: 30 * 2px;
      }
      &-rank {
        z-index: 9;
        background-color: #fff;
        border-radius: 20 * 2px;
        height: 21 * 2px;
        min-width: 85 * 2px;
        &-rankimg {
          margin: 0px 1 * 2px;
          width: 19 * 2x;
          height: 19 * 2px;
        }
        &-nickname {
          @include multi-line-omit(1);
          line-height: 21 * 2px;
          min-width: 68 * 2px;
          max-width: 90 * 2px;
          text-align: center;
          color: #141924;
          font-size: 12 * 2px;
          font-weight: 510;
        }
      }

      &-wings {
        margin-top: 30 * 2px;
        width: 95 * 2px;
        height: 28 * 2;
      }
      &-bdc {
        // max-width: 105 * 2px;
        min-width: 70 * 2px;
        text-align: center;
        margin-top: 5 * 2px;
        margin-bottom: 8 * 2px;
        white-space: nowrap;
        color: #fff;
        font-size: 11 * 2px;
        font-weight: 590;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0%) 0%,
          rgba(255, 255, 255, 0.37) 51.56%,
          rgba(255, 255, 255, 0%) 100%
        );
        background-size: 100%;
        background-repeat: no-repeat;
        padding: 5px;
      }
    }
  }
  .contentview {
    z-index: 200;
    background-color: #fff;
    border-radius: 12 * 2px;
    overflow: hidden;
    position: relative;
    top: -10 * 2px;
    padding: 20 * 2px 15 * 2px;
    padding-bottom: 50px;
    min-height: calc(100vh - 380 * 2px);
    // height: calc(100vh - 360 * 2px - 44 * 2px - 38 * 2px - 20 * 4px);
    // overflow: scroll;
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 80 * 2px;
      &-img {
        width: 100 * 2px;
        height: 100 * 2px;
        margin-bottom: 5px;
      }
      &-desc {
        color: #999da7;
        font-size: 13 * 2px;
      }
    }
  }
  &-item {
    padding: 20 * 2px 15 * 2px;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 2px solid rgba(115, 119, 128, 0.15);

    &-bdc {
      color: #141924;
      font-size: 14 * 2px;
      font-weight: 590;
    }
    &-rank {
      color: #007bff;
      font-size: 14 * 2px;
      font-weight: 650;
      margin-right: 26px;
      min-width: 48px;
    }
    &-img {
      width: 24 * 2px;
      height: 24 * 2px;
      border-radius: 24px;
      margin-right: 6 * 2px;
      overflow: hidden;
    }
    &-nickname {
      font-size: 14 * 2px;
      color: #141924;
      font-weight: 620;
    }
  }
}
.footer {
  z-index: 900;
  justify-content: space-between;
  padding: 0 15 * 2px;
  position: fixed;
  left: 0;
  bottom: calc(constant(safe-area-inset-bottom) + 10px); // 实测 inpone xs 可行
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  margin: 0px 15 * 2px 20 * 2px;
  width: calc(100vw - 19 * 2px - 11 * 2px);
  height: 56 * 2px;

  border-radius: 8 * 2px;
  border: 2px solid rgba(0, 123, 255, 0.2);
  background: linear-gradient(
    90deg,
    rgba(235, 245, 255, 0.8) 0%,
    rgba(231, 254, 255, 0.8) 100%
  );
  box-shadow: 0px 6 * 2px 16 * 2px 0px rgba(0, 29, 85, 0.08);
  backdrop-filter: blur(15 * 2px);

  &-login {
    padding: 5 * 2px 20 * 2px;
    color: #fff;
    text-align: center;
    font-size: 13 * 2px;
    font-weight: 590;
    border-radius: 6 * 2px;
    background: linear-gradient(225deg, #149aff 0.1%, #007bff 100.1%);
  }
  &-img {
    width: 24 * 2px;
    height: 24 * 2px;
    border-radius: 24px;
    overflow: hidden;
    margin-right: 6 * 2px;
  }
  &-nick {
    color: #141924;
    font-size: 14 * 2px;
    margin-right: 10 * 2px;
  }
  &-tag {
    border-radius: 2 * 2px;
    background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
    font-size: 10 * 2px;
    color: #fff;
    padding: 3 * 2px 5 * 2px;
    border-radius: 2.5 * 2px;
    white-space: nowrap;
  }
  &-desc {
    color: #141924;
    font-size: 11 * 2px;
    margin-right: 5 * 2px;
  }
  &-sub-desc {
    color: #999da7;
    font-size: 11 * 2px;
  }

  &-rank {
    color: #007bff;
    font-size: 17 * 2px;
    font-weight: 650;
    margin-left: 8 * 2px;
    white-space: nowrap;
  }
  &-rank-100 {
    color: #007bff;
  }
  &-bdc {
    white-space: nowrap;
    color: #007bff;
    font-size: 14 * 2px;
    font-weight: 590;
  }
}
</style>
